<template>
  <div class="preview-image">
    <el-dialog title="" :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose">
      <div class="content" style="position: relative;">
        <div class="header-box">
          <div class="label-box" v-if="!editConfig.isLookImg">
            <div class="common-title" @click="selTabClick(1)" :class="isBigImage ? 'commonColor' : 'selColor'">
              {{ editConfig.title }}
            </div>
          </div>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <div style="color: #fff;margin: 50px 0px 0px 10px;font-size: 18px;height:100%; ">
          <div v-if="editConfig.infomation.showBlack" style="display: flex;align-items: center;flex-wrap: wrap;"> 
            <p style="width: 20%;">黑名单  ></p>
            <p style="width: 80%;">
              <el-checkbox-group v-model="pedestalList" style="margin-left: 10px;display: flex;flex-wrap: wrap;justify-content: flex-start;">
                <el-checkbox  v-for="(item) in pedestalListsBlack" :key="item.value" :label="JSON.stringify({ value: item.value, title: item.title })"  :disabled="item.isDisabled">
                  {{ item.title }}
                </el-checkbox>
              </el-checkbox-group>
            </p>
          </div>
          <div v-if="editConfig.infomation.showWhite" style="display: flex;align-items: center;flex-wrap: wrap;"> 
            <p style="width: 20%;">白名单  ></p>
            <p style="width: 80%;">
              <el-checkbox-group  v-model="pedestalList" style="margin-left: 10px;display: flex;flex-wrap: wrap;justify-content: flex-start;">
                <el-checkbox  v-for="(item) in pedestalListsWhite" :key="item.value" :label="JSON.stringify({ value: item.value, title: item.title })"  :disabled="item.isDisabled">
                  {{ item.title }}
                </el-checkbox>
              </el-checkbox-group>
            </p>
          </div>
          <div class="footer_button">
            <el-button @click="savePedestal">保存</el-button>
            <el-button @click="cancelPedestal">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTagList,
  moveLibraryUser,
  copyLibraryUser
} from "@/api/baseLibrary/baseLibrary"
export default {
  name: "AddSalesDetailsDialog",
  mixins: [],
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          title:"",
          visible: false,
          infomation: {
          },
          currentId: "",
          isLookImg:true,
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      pedestalList: [],
      pedestalListsWhite:[],
      pedestalListsBlack:[],
      dialogWidth: "39%",
      editConfig: this.editCommonConfig,
      closeUrl: require("@/assets/img/close.png"),
      isBigImage: true,
      leftImgUrl: require("@/assets/img/headImage1.png"),
      rightImgUrl: require("@/assets/img/headImage2.png"),
      taskName: "人脸识别",
      targetScore: 0,
      alarmLevel: "一级",
      otherLabels: "年龄:32/种族:黄人/性别:男/颜值:20/",
      personInfoList: [
        { name: "底库", value: "   底库1" },
        { name: "姓名:", value: "张三" },
        { name: "性别：", value: "女" },
        { name: "身份证号：", value: "a2341324234" },
        { name: "手机号：", value: "157****2335" },
        { name: "重要等级：", value: "一级" }
      ],
      deviceList: [
        { name: "设备名称:", value: "小区一单元摄像头" },
        { name: "出现小区：", value: "小区A" },
        { name: "所属派出所：", value: "a" }
      ],
      tagList: ["常住人口", "尾随人员", "昼伏夜出"],
      commonHttp: "/httpImage/",
      videoPath: "",
      prevBtnDisable: false, // 上一个
      nextBtnDisable: false, // 下一个
      currentIndex: 0,
      snapTime: "",
      checkboxs:[],
    }
  },
  created() {
    this.getTagList() // 底库列表
  },
  mounted(){
    if(this.editCommonConfig.title=="移动至"){
      this.pedestalListsBlack=[]
      this.pedestalListsWhite=[]
    }
  },
  watch: {
    pedestalList:{  
      handler(newVal) {    
        if(newVal.length!==0){
         this.checkboxs=[JSON.parse(newVal)]
        }
        if(newVal.length===1){
          this.pedestalListsWhite.map((item)=>{
            if(item.value===this.checkboxs[0].value){
              item.isDisabled=false
            }else{
              item.isDisabled=true
            }
          })
          this.pedestalListsBlack.map((item)=>{
            if(item.value===this.checkboxs[0].value){
              item.isDisabled=false
            }else{
              item.isDisabled=true
            }
          })
        }else if(newVal.length===0){
          this.pedestalListsWhite.map((item)=>{
            item.isDisabled=false
          })
          this.pedestalListsBlack.map((item)=>{
            item.isDisabled=false
          })
        }
      },  
      // deep: true  
    }  
  },
  methods: {
    handleClose() {
      this.pedestalList=[]
      this.isBigImage = true
      this.editConfig.visible = false
    },
    // 获取底库列表
    async getTagList() {
      const rsp = await getTagList({});
      if (rsp && rsp.success) {
        var arr1 = new Array
        if(rsp.data){
          this.pedestalListsWhite = rsp.data.filter(function (i) {
            if (i.status !== 1 && i.bwType==='2') {
              return i
            }
          })
          this.pedestalListsBlack = rsp.data.filter(function (i) {
            if (i.status !== 1 && i.bwType==='1') {
              return i
            }
          })

          this.pedestalListsWhite.push(...arr1)
          console.log("是啥ddd",this.pedestalListsWhite,this.pedestalListsBlack)
        }
      } else {
        // this.$notify({
        //   title: "失败",
        //   message: "检索数据查询失败！",
        //   type: "warning"
        // });
      }
    },
    // 保存
    savePedestal(){
      console.log([JSON.parse(this.pedestalList).value],"checkbox",this.editConfig.infomation)
      if(this.editConfig.infomation.dialogType==="move"){
        moveLibraryUser({
          personId:this.editConfig.infomation.id,
          tableIds:[this.checkboxs[0].value,]
        }).then((res)=>{
          if(res.success){
            this.$parent.queryDbTables(this.editConfig.infomation.thatSync.isSync)
            this.editConfig.visible=false
            this.$message.success("移动人员成功!")
          }else{
            this.$message.error(res.msg)
          }
        })
      }else if(this.editConfig.infomation.dialogType==="copy"){
        copyLibraryUser({
          personId:this.editConfig.infomation.id,
          tableIds:[this.checkboxs[0].value,]
        }).then((res)=>{
          if(res.success){
            this.$parent.queryDbTables(this.editConfig.infomation.thatSync.isSync)
            this.editConfig.visible=false
            this.$message.success("复制人员成功!")
          }else{
            this.$message.error(res.msg)
          }
        })
      }
      
    },
    cancelPedestal(){
      this.pedestalList=[]
      this.editConfig.visible=false
    },
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.preview-image {
  width: 760px;
  height: 734px;
  .dialog-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    height: 65px;
    background: #0a1a34;
  }
  .content {
    width: 760px;
    height: 734px;
    background-image: url("/public/panoramicData/pic_alert_bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    padding: 0 20px;
    position: relative;
    .header-box {
      height: 65px;
      border-bottom: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding-top: 10px;
      .label-box {
        display: flex;
        color: #fff;
        font-size: 28px;
        .common-title {
          margin: 0 20px;
          cursor: pointer;
        }
      }
      .close-box {
        width: 15px;
        height: 22px;
        margin-right: 20px;
        .el-image {
          cursor: pointer;
        }
      }
    }
    .bigImage-box {
      color: #fff;
      .top-view {
        display: flex;
        .snap-left-box {
          .label-common {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            margin: 15px 15px;
          }
          .img-box {
            width: 409px;
            height: 255px;
            .el-image {
              width: 100%;
              height: 100%;
            }
          }
          .value-common {
            font-weight: 700;
            margin-top: 28px;
            margin-left: 7px;
            font-size: 16px;
          }
          .device-info {
            margin-left: 7px;
            margin-top: 10px;
            font-size: 16px;
            width: 409px;
          }
        }
        .snap-right-box {
          margin-left: 20px;
          .label-common {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            margin: 15px 0px;
          }
          .snap-image-box {
            display: flex;
            position: relative;
            margin-bottom: 30px;
            .img-right,
            .img-left {
              width: 133px;
              height: 139px;
            }
            .img-right {
              margin-left: 20px;
            }
            .radio-view {
              position: absolute;
              left: calc(50% - 50px);
              bottom: -10px;
              width: 100px;
              height: 38px;
              line-height: 40px;
              border-radius: 6px;
              background: #008000;
              font-size: 22px;
              text-align: center;
            }
          }
          .person-info {
            margin-top: 10px;
            font-size: 16px;
          }
        }
      }
      .bottom-view {
        margin-left: 7px;
        .other-box {
          margin-top: 10px;
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
        }
        .tag-box {
          margin-top: 20px;
          display: flex;
          .tag-info {
            width: 88px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 3px;
            opacity: 1;
            background: #3d6da1;
            box-sizing: border-box;
            border: 1px solid #ffffff;
            margin-left: 10px;
            &:first-child {
              margin-left: 0px;
            }
          }
        }
      }
    }
    .video-box {
      display: flex;
      .left-video {
        margin-top: 20px;
        width: 70%;
        height: 400px;
        .no-video {
          width: 100%;
          height: 260px;
          line-height: 260px;
          text-align: center;
          background: #0a1a34;
          border: 2px solid #3d6da1;
          border-radius: 5px;
          color: #e5e5e5;
          font-size: 22px;
        }
      }
      .right-video {
        width: 30%;
        margin-left: 20px;
        .label-common {
          color: rgba(255, 255, 255, 0.8);
          font-size: 18px;
          margin: 15px 0px;
        }
      }
    }
    .footer-box {
      position: absolute;
      right: 45px;
      bottom: 35px;
      height: 32px;
      text-align: right;
      .el-button {
        color: #fff;
        background-color: transparent;
      }
    }
  }
}
.commonColor {
  color: #fff;
}
.selColor {
  color: #767676;
}
</style>
<style lang="scss">
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__body {
  background: #0a1a34;
  width: 760px;
}
.footer_button {
  position: absolute;
  bottom: 50px;
  right: 50px;
}
</style>
